<template>
  <div>

    <SearchForm @search="getTableData" @reset="clearSearch">
      <el-col :span="8" :xs="24" v-show="$permiss[238]">
        <el-form-item :label="$t('所属租户')" prop="adminUserId">
          <el-select v-model="page.adminUserId" style="width: 100%" clearable>
            <el-option v-for="item in tenantList" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('银行名称')" prop="bankName">
          <el-input v-model="page.bankName"/>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('银行账户')" prop="bankAccount">
          <el-input v-model="page.bankAccount"/>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('交易流水')" prop="dealFlow">
          <el-input v-model="page.dealFlow"/>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('充值方式')" prop="topUpType">
          <el-select v-model="page.topUpType" style="width: 100%;" clearable>
            <el-option v-for="item in rechargeMode" :value="item.value" :label="item.label"
                       :key="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('充值时间')" prop="timeValue">
          <el-date-picker
              v-model="page.timeValue"
              style="width: 100%"
              type="daterange"
              value-format="yyyy-MM-dd"
              unlink-panels
              range-separator="~"
              :start-placeholder="$t('开始日期')"
              :end-placeholder="$t('结束日期')">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </SearchForm>
    <el-card shadow="never" style="margin-top: 10px">
      <div v-show="$permiss[237]">
        <el-link type="primary" :underline="false" class="amount"> {{ $t('账户余额') }} : {{ amountTotal.money }}
        </el-link>
        <el-link type="primary" :underline="false" class="amount"> {{ $t('赠送总金额') }} : {{ amountTotal.totalGiveAmount }}
          {{
          }}
        </el-link>
        <el-link type="primary" :underline="false" class="amount"> {{ $t('充值总金额') }} : {{
            amountTotal.totalTopUpAmount
          }} {{
          }}
        </el-link>
      </div>
      <Table :table-column="tableColumn" :loading="loading" :page="page" :table-data="tableData" @handleCurrentChange="handleCurrentChange"
             @handleSizeChange="handleSizeChange">
        <template slot="first">
          <el-table-column v-if="$permiss[238]" :label="$t('所属租户')" align="center" prop="adminName"></el-table-column>
        </template>
      </Table>
    </el-card>
  </div>
</template>

<script>
import {rechargeList, rechargeTotal, selectTenant} from '@/api/system'
import {dateFormatSection} from "@/utils/tools";

export default {
  name: "rechargeList",
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      loading:false,
      tenantList: [],
      tableColumn: [
        {label: this.$t('银行名称'), prop: 'bankName', minWidth: 100},
        {label: this.$t('银行账号'), prop: 'bankAccount', minWidth: 150},
        {label: this.$t('充值金额'), prop: 'topUpAmount',},
        {label: this.$t('赠送金额'), prop: 'giveAmount',},
        {label: this.$t('交易流水'), prop: 'dealFlow', minWidth: 150},
        {label: this.$t('备注'), prop: 'remark', minWidth: 150},
        {label: this.$t('操作人'), prop: 'inputName',},
        {label: this.$t('充值方式'), prop: 'topUpType',},
        {label: this.$t('充值时间'), prop: 'creationTime', minWidth: 150},
      ],
      tableData: [],
      amountTotal: {},
      rechargeMode: [
        {label: this.$t('微信'), value: 1},
        {label: this.$t('支付宝'), value: 2},
        {label: this.$t('银行卡汇款'), value: 3},
      ]
    }
  },
  async mounted() {
    this.getTableData()
    this.tenantList = await selectTenant().then(res => res.data)
  },
  methods: {
    async getTableData() {
      const timeValue = dateFormatSection(this.page.timeValue)
      const params = Object.assign({}, this.page, {
        datetimeStart: timeValue && timeValue.length > 1 ? timeValue[0] : undefined,
        datetimeEnd: timeValue && timeValue.length > 1 ? timeValue[1] : undefined,
      })
      delete params.timeValue
      this.loading = true
      this.getRechargeTotal(params)
      const res = await rechargeList(params)
      if (res.code === 1) {
        const {list,  total} = res.data
        this.tableData = list.map(item => {
          if (item.topUpType) {
            item.topUpType = this.rechargeMode.filter(val => item.topUpType === val.value)[0].label
          }
          return item
        })
        this.page = Object.assign({}, this.page, {
          total: total
        })
        this.loading = false
      }else {
        this.loading = false
      }
    },
    handleCurrentChange(value) {
      this.page.pageNum = value
      this.getTableData()
    },
    handleSizeChange(value) {
      this.page.pageSize = value
      this.getTableData()
    },
    // 获取充值总计
    async getRechargeTotal(params) {
      const res = await rechargeTotal(params)
      if (res.code === 1) {
        this.amountTotal = res.data
      }
    },
    // 重置搜索框
    clearSearch() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
      this.getTableData()
    },
  }
}
</script>

<style lang="less" scoped>

.amount {
  font-size: 18px;
  margin-left: 30px;
  margin-bottom: 10px;
}
</style>
